<template>
	<view class="home-set">
		<view class="set-mod">
			<view class="mod-body">
				<view class="tot-item">
					<text class="item-lab">{{water_label}}：</text>
					<text class="item-num">{{water_outs}}</text>
					<text class="item-unit">升</text>
				</view>
			</view>
			<view class="mod-foot">
				<view class="set-number-box">
					<u-number-box v-model="water_yield" @change="valChange" :min="0" :max="19" :step="0.1" :positive-integer="false" ></u-number-box>
				</view>
			</view>
			
		</view>
		<view class="u-padding-bottom-10 u-flex">
			<u-button type="success" size="medium" @click="sendmsg(1)">定量出水(纯水)</u-button>
			<u-button type="warning" size="medium" @click="sendmsg(0)">定量出水(矿化水)</u-button>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			 water_yield: 0.00,
			 water_val:0.0,
			 water_outs:0.0,
			 water_label:'定量接水'
		};
	},
	props: {
		device:{
			type:Object,
			default:function(){
				return {};
			}
		}
	},
	computed: {},
	created() {
		this.water_yield = parseFloat(this.device.water_yield); 
	},
	methods: {
		jump(data) {
			this.$tools.routerTo(data.path);
		},
		valChange(e) {
			console.log('当前值为: ' + e.value);
			this.water_val = e.value
		},
		sendmsg(purewater){
			if(parseFloat(this.water_val) <= 0.0){
				uni.showModal({
					title:"系统提醒",
					content:'出水量必须大于0',
					showCancel:false
				});
				return false;
			}
			if(purewater == 1){
				this.water_label = '已接矿化水';
			}
			else{
				this.water_label = '已接纯水';
			}
			this.$emit("sendmsg",this.water_val,purewater);
		},
		setWaterOut(val){
			this.water_outs = val;
		}
	}
};
</script>

<style lang="scss" scoped>
	.home-set{
		margin: 24upx;
		box-shadow: -1upx 2upx 20upx 0 rgba(6, 0, 1, 0.06);
		border-radius: 10upx;
		background-color: #fff;
	}
	.set-mod{
		position: relative;
		display: flex;
		align-items: center;
		padding: 24upx;
		min-height: 88upx;
		line-height: 1.2;
		
		
		.mod-body{
			flex: 1;
			min-width: 0;
		}
		.mod-foot{
			margin-left: 24upx;
			display: flex;
			align-items: center;
		}
	}
	.tot-item{
		font-size: 32upx;
		.item-lab{
			font-size: 26upx;
		}
		.item-num{
			
		}
		.item-unit{
			
		}
	}
	.set-number-box{
		/deep/.u-numberbox{
			.u-number-input{
				width: 108upx!important;
				height: 48upx!important;
				font-weight: bold;
				font-size: 34upx!important;
				color: #428cff!important;
			}
			.u-icon-minus,
			.u-icon-plus{
				width: 48upx!important;
				height: 48upx!important;
				border-radius: 14upx;
			}
			.u-icon-minus{
				color: #535455!important;
				background-color: #f4f6fa!important;
			}
			.u-icon-plus{
				color: #428cff!important;
				background-color: #dbeaff!important;
			}
		}
	}
	.set-btns{
		margin-left: 30upx;
		/deep/.u-btn{
			&.u-size-mini{
				font-size: 24upx;
			}
		}
	}
</style>
